<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <p>p1</p>
        <span>
            span1
            <span>span2</span>
        </span>
        <p>p2</p>
        <span>
            span3
            <span>span4</span>
        </span>
    </div>
    <script>
        const root = document.querySelector('#root')
        const queue = []
        let front = 0, rear = 0, levelPos = 0
        queue.push(root)
        rear = 1, levelPos = 1
        let temp = []
        while(front < rear) {
            let node = queue[front++]
            temp.push(node.nodeName)
            for(let i = 0; i < node.children.length; i++) {
                queue[rear++] = node.children[i]
            }
            if(front === levelPos) {
                console.log(temp)
                temp = []
                levelPos = rear
            }
        }
    </script>
</body>

</html>